<!--
 * @Description: 
 * @Author: 呆龙
 * @Date: 1023-09-15 13:03:45
 * @LastEditTime: 2023-09-18 13:13:31
 * @LastEditors: 呆龙
-->
<template>
  <!-- vue3页面 -->
  <a-card>
    <div style="display: flex">
      <a-input-group compact style="width: 250px; margin-right: 10px">
        <a-select v-model:value="workNoOrName" style="width: 30%">
          <a-select-option value="name">姓名</a-select-option>
          <a-select-option value="workNo">工号</a-select-option>
        </a-select>
        <a-input v-model:value="filterNameOrWorkNoText" style="width: 70%" />
      </a-input-group>
      <MySelect
        :title="'请选择教代会'"
        :selectData="selectData"
        :fieldNames="{ label: 'name', value: 'id' }"
        :style="{ width: '220px', marginRight: '10px' }"
      />
      <MySelect
        :title="'请选择代表团'"
        :selectData="selectData"
        :fieldNames="{ label: 'name', value: 'id' }"
        :style="{ width: '220px', marginRight: '10px' }"
      />
      <MySelect
        :title="'请选择工会'"
        :selectData="selectData"
        :fieldNames="{ label: 'name', value: 'id' }"
        :style="{ width: '220px', marginRight: '10px' }"
      />
      <MySelect
        :title="'请选择单位'"
        :selectData="selectData"
        :fieldNames="{ label: 'name', value: 'id' }"
        :style="{ width: '220px', marginRight: '10px' }"
      />
      <MySelect
        :title="'请选择代表身份'"
        :selectData="selectData"
        :fieldNames="{ label: 'name', value: 'id' }"
        :style="{ width: '220px', marginRight: '10px' }"
      />
      <a-button type="primary">搜索</a-button>
    </div>
    <div style="margin-top: 10px; display: flex">
      <a-button type="primary" danger
        ><template #icon><DeleteOutlined /></template>批量删除</a-button
      >
      <a-button type="primary" class="addBtn"
        ><template #icon><PlusOutlined /></template>新增代表</a-button
      >
      <a-button type="primary" class="fenBtn"
        ><template #icon><RetweetOutlined /></template>代表分配</a-button
      >
    </div>
  </a-card>
  <MyTable
    :columns="columns"
    :rowKey="'id'"
    @select="onSelect"
    useSelect
    :useNumber="true"
    :tableData="tableData"
  >
  </MyTable>
</template>

<script setup lang="ts">
import { ref, onMounted, createVNode } from "vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import { getRepresentativeUser, administer } from "@/api/contingent";
import MyTable from "@/components/CommonDai/Table.vue";
import {
  DeleteOutlined,
  PlusOutlined,
  RetweetOutlined,
} from "@ant-design/icons-vue";
import { Button, Tag } from "ant-design-vue";
onMounted(() => {
  getRepresentativeUser("").then((res: any) => {
    console.log(res.userList);
    selectData.value = res.userList;
  });
  administer("").then((res: any) => {
    console.log(res);
    tableData.value = res.list;
  });
});
const selectData = ref([]);

/**
 * 过滤规则：名字或者工号
 */
const filterNameOrWorkNoText = ref("");
const workNoOrName = ref("name");
/**
 * 表格数据展示功能
 */
const tableData = ref([]);
const onSelect = (array: string[]) => {
  console.log(array);
};
const onEditOrDelete = (editOrDelete: boolean, id: string) => {
  console.log(editOrDelete, id);
};
const columns = ref([
  {
    title: "工号",
    dataIndex: "workNo",
    align: "center",
    isShow: true,
  },
  {
    title: "姓名",
    dataIndex: "name",
    align: "center",
    isShow: true,
  },
  {
    title: "性别",
    dataIndex: "workNo",
    align: "center",
    isShow: true,
  },
  {
    title: "联系方式",
    dataIndex: "mobile",
    align: "center",
    isShow: true,
  },
  {
    title: "代表团",
    dataIndex: "deputation",
    align: "center",
    isShow: true,
  },
  {
    title: "所属工会",
    dataIndex: "union",
    align: "center",
    isShow: true,
  },
  {
    title: "所属单位",
    dataIndex: "dept",
    align: "center",
    isShow: true,
  },
  {
    title: "届次",
    dataIndex: "session",
    align: "center",
    isShow: true,
  },
  {
    title: "代表身份",
    dataIndex: "standing",
    align: "center",
    isShow: true,
    customRender: ({ text }: any) => {
      return createVNode(Tag, { color: "blue" }, () => text);
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    isShow: true,
    width: 100,
    customRender: ({ record }: any) => {
      return createVNode(
        "div",
        {
          style: {
            display: "flex",
            justifyContent: "space-between",
          },
        },
        [
          createVNode(
            Button,
            {
              type: "link",
              size: "small",
              onClick: () => {
                onEditOrDelete(true, record.id);
              },
            },
            () => "编辑"
          ),
          createVNode(
            Button,
            {
              type: "link",
              size: "small",
              onClick: () => {
                onEditOrDelete(false, record.id);
              },
            },
            () => "删除"
          ),
        ]
      );
    },
  },
]);
</script>
<!-- <template #Column="{ record, column }">
      <div v-if="column.dataIndex === 'action'">  
        <a-dropdown>
          <template #overlay>
            <a-menu @click="onClick($event, record.id)">
              <a-menu-item key="1" style="text-align: center">查看</a-menu-item>
              <a-menu-item key="2" style="text-align: center">编辑</a-menu-item>
              <a-menu-item key="3" style="text-align: center">删除</a-menu-item>
            </a-menu>
          </template>
          <a-button type="primary">
            <SettingOutlined />
            <DownOutlined />
          </a-button>
        </a-dropdown>
      </div>
    </template> -->
<style scoped lang="less">
:deep(.ant-card-body) {
  padding: 20px;
}
:deep(svg) {
  vertical-align: middle;
}
.addBtn {
  border: 1px solid #67c23a;
  background: #67c23a;
  margin-left: 20px;
}
.fenBtn {
  background-color: #e6a23c;
  border-color: #e6a23c;
  margin-left: 20px;
}
:deep(.ant-input-group) {
  border-inline-end-width: 5px;
  border-start-end-radius: 6px;
  border-end-end-radius: 6px;
}
</style>
